<script>
	const segmentit = Segmentit.useDefault(new Segmentit.Segment());
    let userText = ""
    let segmentationTexts=[]
    let filterList=[];
    let filterValue=0;
    function segmentation(){
        segmentationTexts=segmentit.doSegment(userText);
        filter();
        console.log(segmentationTexts);
    }
    function copy(text){
        try{
			window.$G.setClipboard({
                data:text,
                success(){
					Toastify({
						text: "复制成功",
						duration: 3000,
						newWindow: true,
						close: false,
						gravity: "top", 
						position: "center",
						stopOnFocus: true,
						backgroundColor: "gray",
					}).showToast();
                },
                fail(err){
					Toastify({
						text: "复制成功",
						duration: 3000,
						newWindow: true,
						close: false,
						gravity: "top", 
						position: "center",
						stopOnFocus: true,
						backgroundColor: "red",
					}).showToast();
                },
            });
		}catch(e){}
    }
    function filter(){
        console.log(filterValue,"filterValue")
        var arr=[];
        segmentationTexts.forEach((item)=>{
            if(item.w.length>=filterValue){
                arr.push(item) 
            }
        })
        filterList=arr;
        console.log(segmentationTexts,"segmentationTexts")
    }
    function clear(){
        userText = ""
        segmentationTexts=[]
        filterList=[];
        filterValue=0;
    }
    function getClipboardText(){
        try{
			window.$G.getClipboard({
                success(info){
                    clear();
                    userText = info.data
                    segmentation();
                },
                fail(err){
                },
            });
		}catch(e){}
    }
</script>
<main>
    <div class="content">
        <textarea class="userInput" placeholder="请输入需要分段的文本" bind:value={userText}  on:input={segmentation}></textarea>
        
        <div class="result">
            {#each filterList||segmentationTexts as {w}}
            <span class="paragraph" on:click={copy(w)}>{w}</span>
            {/each}
        </div>
        <div class="tool">
            <div class="filter">
                <input type="range" name="points" min="1" bind:value={filterValue} on:change={filter} max="10">
                <span class="filter_tip"> 过滤小于等于{filterValue}的字数 </span> 
            </div>
            <button class="clear" on:click={clear}>清空</button>
            <button class="getClipboardTextBtn" on:click={getClipboardText}>获取粘贴板</button>
        </div>
    </div>
</main>
<style>
    main{
        height: 100%;
        width: 100%;
    }
    .content{
        display: flex;
        flex-flow: column;
        height: 100%;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        padding-top: 60px;
        box-sizing: border-box;
    }
	.userInput{
        width: 100%;
        height: 30%;
        flex: 1;
        resize: none;
        border: none;
        border-radius: 13px;
        border: 1px solid #c8c8c8;
        line-height: 27px;
        padding: 10px;
        box-sizing: border-box;
    }
    .result{
        flex: 3;
        overflow: auto;
        padding: 10px 0px;
        box-sizing: border-box;
    }
    .paragraph{
        padding: 5px 10px;
        box-sizing: border-box;
        border-radius: 4px;
        display: inline-block;
        margin: 5px 2px;
        background: #d6d6d6;
        color: black;
        word-break: break-all;
        font-size: 14px;
    }
    .clear,.getClipboardTextBtn{
        border: none;
        padding: 10px 10px;
        border-radius: 5px;
        background: rgb(82 84 255);
        color: white;
        font-size: 16px;
    }
    .getClipboardTextBtn{
        background: orange;
        margin:0px 10px;
    }
    .filter_tip{
        color: #535353;
        font-size: 10px;
    }
    .tool{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0px;
        box-sizing: border-box;
        background: white;
        margin: 10px 0px;
        border-radius: 10px;
        font-size: 14px;
    }
    .filter{
        flex: 1;
        padding: 0px 10px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }
    .filter input{
        width: 100%;
        height: 20px;
    }
</style>